<template>
    <div id='nlpg' class="nlpgContent flex">
        <div class="detailNavigationBar divCss">
            <div   :style="{fontSize:'14px'}"
                    class="detail" :title="item.name"
                    v-for="(item,index) in tableListArr"
                    @click="detailTable(item,index)"
                    :class="{bgc:tableNum==index}"
                    :key="index"
            >{{ item.name }}
            </div>
        </div>
        <div class="nlpgBox divCss">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    id:'nlpg',
    data () {
        return {
            msg:'能力评估',
            tableNum: 0,
            tableListArr: [
                { name: "能力评估", path: "/sjwh/nlpg/fspg" }
            ],
        }
    },
  mounted(){
    this.$router.push(this.tableListArr[0].path);
  },
    methods: {
    detailTable(item,index) {
        this.tableNum = index;
        this.$router.push(item.path);
    },
    },
}
</script>

<style lang="less">
.nlpgContent{
    height: calc(100% - 65px);
    width: 100%;
    .nlpgBox {
        box-sizing: border-box;
        padding: 20px;
        margin-left: 10px;
        height: 100%;
        width: calc(100% - 230px);
    }
}
</style>
